<link rel="stylesheet" type="text/css" href="/assets/third-party/datatables-1.10.0/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/dataTables.bootstrap.css">

<div class="container-fluid" style="margin-top: 60px;">
    <div class="row" style="margin-top: 10px;">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    幻灯片管理
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <select id="category_id" class="form-control" style="width: 200px; margin-bottom: 20px; display: inline;">
                        <option value="index">首页幻灯片</option>
                        <option value="index">网游栏目幻灯片</option>
                    </select>
                    <a class="btn btn-primary" data-toggle="modal" data-target="#swipeModal"> <i class="fa fa-plus"></i> 添加幻灯片 </a>
                    <table class="table table-bordered table-hover" role="dataTables">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>标题</th>
                                <th>图片</th>
                                <th>链接地址</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="items">
                            <?php foreach ($items as $key => $value) { ?>
                                <tr data-id="<?php echo $value->id; ?>">
                                    <td><?php echo $value->id; ?></td>
                                    <td><?php echo $value->title; ?></td>
                                    <td><?php echo $value->thumbnail; ?></td>
                                    <td><?php echo $value->url; ?></td>
                                    <td>
                                        <a clas="btn btn-sm btn-info" data-toggle="modal" data-target="#swipeModal"> 编辑 </a>
                                        <a clas="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal"> 删除 </a>
                                    </td>
                                </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 幻灯片详情模态框 -->
<div class="modal fade" id="swipeModal" tabindex="-1" role="dialog" aria-labelledby="swipeModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="swipeModalTitle"> 幻灯片详细 </h4>
            </div>
            <div class="modal-body">
                <form id="frmSwipe" role="form" action="" method="post" data-parsley-validate>
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="课程名称" required>
                    </div>
                    <div class="form-group">
                        <label for="btnUpload">图片</label>
                        <img src="" id="viewThumbnail" alt="" style="width: 80px;"/>
                        <input type="hidden" id="thumbnail" name="thumbnail" />
                        <a id="btnUpload" class="btn btn-info" data-panel='thumbnail' data-toggle="modal" data-target="#modal-upload">上传</a>
                    </div>
                    <div class="form-group">
                        <label for="url">链接</label>
                        <input type="text" class="form-control" id="url" name="url" placeholder="该课程费用">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                <button type="button" id="btnSave" class="btn btn-primary"> 保存 </button>
            </div>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="alert alert-warning">
                    <strong>确定删除？</strong>
                    <p id="help-block"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                <button type="button" id="btnConfirm" data-url="" class="btn btn-danger"> 确定 </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/assets/js/tools.js"></script>
<script type="text/javascript" src="/assets/third-party/datatables-1.10.0/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
    $(function(){

        $('table[role="dataTables"]').dataTable({
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "很抱歉，未找到相关数据",
                "sInfo": "从 _START_ 至 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有符合条件的数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sSearch": "搜索：",
                "oPaginate": {  
                    "sFirst": "首页",  
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }  
            }
        });
    });
</script>